<template>
  <div class="app-container bg-gray">
    <el-row class="box-1">
      <el-col :span="24">
        <el-card>
          <div class="header">
            <div>
              <el-select v-model="searchTerms.type" placeholder="行业类型" clearable @change="getData">
                <el-option v-for="item in typeList" :key="item.id" :label="item.type_name" :value="item.id" />
              </el-select>
              <el-input v-model="searchTerms.searchValue" placeholder="请输入内容" class="search-input" @change="getData" />
              <el-button type="success" class="do-btn" icon="el-icon-search" @click="getData">搜索</el-button>
              <div class="flex-1"/>
              <el-button v-if="queryMatch(24)" type="success" class="bg-green" icon="el-icon-circle-plus" @click="toModify('添加案例')">添加案例</el-button>
            </div>
          </div>

          <el-row :gutter="40" :style="{'max-height':tableMaxHeight+'px'}" class="model">
            <el-col v-for="(item, index) in tableData" :key="item.id" :xs="12" :sm="8" :md="6" :lg="4" :xl="4">
              <el-card :body-style="{ padding: '0px' }" shadow="hover" @mouseenter.native="maskShow(index)" @mouseleave.native="maskHidden(index)">
                <ws-img :src="ImageUrl+item.case_pic" class="image" alt="" />
                <div class="name">{{ item.case_name?item.case_name:'未命名' }}</div>
                <div class="version"> 版本号：{{ item.case_version?item.case_version:'v-1.0.1' }}</div>
                <transition name="el-zoom-in-center el-fade-in-linear">
                  <div v-show="doMaskShow&&getIsMaskShow(index)" class="mask">
                    <i v-if="queryMatch(25)" class="el-icon-edit" @click="toModify('编辑案例',item)"/>
                    <i v-if="queryMatch(26)" class="el-icon-delete" @click="toDelete(item)"/>
                  </div>
                </transition>
              </el-card>
            </el-col>
          </el-row>
          <el-pagination
            :current-page.sync="currentPage"
            :page-size="pageSize"
            :page-sizes="pageSizes"
            :total="total"
            class="pagination"
            layout="total, sizes, prev, pager, next, jumper"
            @current-change="handleCurrentChange"
            @size-change="handleSizeChange"/>
        </el-card>
      </el-col>
    </el-row>
    <el-dialog :visible.sync="dialogVisible" :title="form.title" width="460px" center class="dialog" @close="form={}">
      <el-form ref="form" :model="form" :rules="formRules" label-width="115px">
        <el-form-item label="图标" prop="case_pic">
          <ws-upload-single-img v-model="form['case_pic']" :path="ImageUrl+form['case_pic']"/>
        </el-form-item>
        <el-form-item label="案例名称" prop="case_name">
          <el-input v-model="form.case_name" />
        </el-form-item>
        <el-form-item label="版本号" prop="case_version">
          <el-input v-model="form.case_version" />
        </el-form-item>
        <el-form-item label="行业" prop="type">
          <el-select v-model="form.type" placeholder="行业类型">
            <el-option v-for="item in typeList" :key="item.id" :label="item.type_name" :value="item.id" />
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible=false">取 消</el-button>
        <el-button type="primary" @click="submitDialog('form')">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { handleSizeChange, handleCurrentChange } from '../../../utils/table'
export default {
  data() {
    return {
      // ImageUrl: this.$store.getters.serverUrl,
ImageUrl: '',

      searchTerms: {
        searchValue: '',
        type: ''
      },

      doMaskShow: false, // 鼠标是否进入的判断

      // 下拉框相关数据
      typeList: [],

      // 表格相关数据
      tableMaxHeight: document.documentElement.clientHeight - 280,

      // 表格相关参数
      tableLoading: false,
      currentPage: 1,
      pageSize: 12,
      pageSizes: [6, 12, 24, 48, 96],
      total: 0,
      tableData: [],

      // 弹窗相关数据
      dialogVisible: false,
      form: { // 个人信息弹窗数据
        case_name: '',
        case_pic: '',
        case_version: '',
        type: ''
      },
      formRules: { // 个人信息弹窗验证规则
        case_pic: [{ required: true, message: '请选择图片', trigger: 'change' }],
        case_name: [{ required: true, message: '请填写案例名称', trigger: 'change' }],
        case_version: [{ required: true, message: '请填写案例版本号', trigger: 'change' }],
        type: [{ required: true, message: '请选择案例类型', trigger: 'change' }]
      }
    }
  },
  watch: {},
  created() {
    this.getData()
    this.getTypeList()
  },

  methods: {
    handleCurrentChange, handleSizeChange,
    /**
     * 对应接口案例列表("case/list"),
     * token  用户凭证  (必填)
     * page_no   当前页码
     * page_size   每页数量
     * sortName  排序字段名
     * sortOrder   排序方式
     * search  关键词
     * type 类型
     * return: {
     *  "total":28,
     *  "rows":[{
     *      "id":16,
     *      "case_name":"",
     *      "case_pic":"",
     *      "case_version":"",
     *      "type":1,
     *      "is_del":0,
     *      "created_at":"2018-08-13 14:50:13",
     *      "updated_at":"2018-08-13 14:50:13"
     *   }]
     * }
     * */
    getData(order) {
      const loading = this.$loading({ lock: true })
      order || (order = {})
      const url = 'case/list'
      const data = {
        page_no: this.currentPage,
        page_size: this.pageSize,
        search: this.searchTerms.searchValue,
        type: this.searchTerms.type
      }
      order.sortName && (data.sortName = order.sortName)
      order.sortOrder && (data.sortOrder = order.sortOrder)
      this.$store.dispatch('GetConnect', { url, data }).then(res => {
        loading.close()
        this.tableData = res.data.rows
        this.total = res.data.total
      }).catch(e => {
        loading.close()
        this.$message.error(e.msg + ',请刷新或联系管理员')
      })
    },

    /**
     *  获取案例类型
     *  接口:'case/type-list'
     */
    getTypeList() {
      const url = 'case/type-list'
      this.$store.dispatch('GetConnect', { url }).then(res => {
        this.typeList = res.data
      }).catch(e => {
        this.$message.error(e.msg + ',请刷新或联系管理员')
      })
    },

    /**
     *  设置对应的案例遮罩层出现
     */
    maskShow(index) {
      this['isMaskShow' + index] = true
      this.doMaskShow = true // 修改参数引起页面更新
    },
    /**
     *  设置对应的案例遮罩层隐藏
     */
    maskHidden(index) {
      this['isMaskShow' + index] = false
      this.doMaskShow = false // 修改参数引起页面更新
    },
    /**
     *  返回当前案例遮罩是否显示
     */
    getIsMaskShow(index) {
      return this['isMaskShow' + index]
    },

    /**
     * 删除产品
     * row: 当前点击的行的数据
     */
    toDelete(item) {
      this.$confirm('此操作将把该案例删除, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const url = 'case/delete/' + item.id
        this.$store.dispatch('GetConnect', { url }).then(res => {
          this.$message.success(res.msg)
          this.getData()
        }).catch(e => {
          this.$message.error('删除失败,请刷新或联系管理员!')
        })
      })
    },

    /**
     * 跳转产品修改页面
     * title: 新增/修改
     * row: 当前点击的行的数据,为空时为新增
     */
    toModify(title, item) {
      this.form.title = title
      this.dialogVisible = true
      item && (this.form = {
        title: title,
        id: item.id,
        case_name: item.case_name,
        case_pic: item.case_pic,
        case_version: item.case_version,
        type: item.type
      })
    },

    /**
     * 弹窗表单提交方法,通过判断有没有form_id执行添加或编辑操作
     * formName: form表单中ref的值,即表单名
     */
    submitDialog(formName) {
      this.$refs[formName].validate((valid) => { // 表单验证
        if (valid) {
          // this.$refs.upload.submit() // 图片上传
          const url = this.form.id ? '/case/edit/' + this.form.id : '/case/create'
          const data = this.form
          this.$store.dispatch('GetConnect', { url, data }).then(res => {
            this.dialogVisible = false
            this.$message.success(res.msg)
            this.getData()
          }).catch(e => {
            this.$message.error('案例操作失败,请刷新或联系管理员!')
          })
        } else {
          this.$message.error('提交失败,请检查必填项')
        }
      })
    }
  }
}
</script>

<style lang="scss" type="text/scss" scoped>
  @import '../../../styles/index.scss';
  .box-1 {
    .header {
      @include flex-row(center, space-between);
      padding-bottom: 15px;
      flex-wrap: wrap;
      > div {
        @include flex-row(center, flex-start);
        flex-wrap: wrap;
        width: 100%;
      }
      .el-select {
        padding-right: 15px;
        width: 180px;
      }
      .search-input {
        width: 240px;
      }
      .do-btn {
        @extend .bg-green;
        margin-left: 6px;
      }
    }
    .model {
      overflow: auto;
      > .el-col {
        position: relative;
        margin: 20px 0;
        text-align: center;
        .image {
          width: 100%;
          display: block;
        }
        .name{
          margin: 12px 0 8px 0;
          color: $text7a;
        }
        .version{
          margin-bottom: 12px;
          color: $textGray;
        }
        .mask {
          @include flex-row(center, center);
          position: absolute;
          top: 0;
          height: 100%;
          width: calc(100% - 40px);
          background-color: rgba(30, 194, 160, .3);
          border-radius: 4px;
          i {
            cursor: pointer;
            color: white;
            padding: 12px;
            font-size: 38px;
            border-radius: 38px;
            &:hover {
              background-color: rgba(67, 67, 67, .3);
              color: white;
            }
            &:first-child {
              margin-right: 30px;
            }
          }
        }
      }
    }
  }
  .dialog {
    .content {
      text-align: center;
    }
  }
</style>
